<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* .box{
            color: red;
        } */
    </style>
</head>

<body>
    <div class="box" style="color: red;">123</div>
    <ul class="container">


    </ul>
    <script>
        // 1.获取 
        // 2.操作dom
        // 一、给dom元素填充文本innerText: 1.替换原本的文本 ；2. 获取元素对应文本；
        // var divEle = document.querySelector(".box");
        // // divEle.innerText = "5555";
        // // divEle.innerText(555); //错误写法；
        // console.log(divEle.innerText);

        // 二、设置或者获取dom元素的超文本(html)； innerHTML
        // 1.替换超文本  2. 获取超文本； 3.替换的内容 一般是字符串或者数字；
        // var divEle = document.querySelector(".box");
        // divEle.innerHTML = 55555;
        // divEle.innerHTML = "hello";
        // var obj = {name:"张三"};
        // divEle.innerHTML = obj;
        // console.log(typeof divEle);
        /* var ele = {accessKey: "",
                        align: "",
                        ariaAtomic: null,
                        ariaAutoComplete: null,
                        ariaBusy: null,
                        ariaChecked: null,
                        ariaColCount: null,
                        ariaColIndex: null
                        ariaColSpan: null
                        ariaCurrent: null
                        ariaDescription: null
                        ariaDisabled: null
                        ariaExpanded: null
                        ariaHasPopup: null
                        ariaHidden: null
                        ariaKeyShortcuts: null
                        ariaLabel: null
                        ariaLevel: null
                        ariaLive: null
                        ariaModal: null
                        ariaMultiLine: null}
        */
        // console.log(divEle)

        // 三、innerHTML 和 innerText区别
        // var divEle = document.querySelector(".box");
        // // divEle.innerHTML = "<h1>我是标题</h1>";
        // divEle.innerText = "<h1>我是标题</h1>";

        // 四、style：设置或者获取样式； 注意：只能设置或者获取行间样式；
        // var divEle = document.querySelector(".box");
        // // document.onclick = function () {
        // //     divEle.style.color = "red";
        // // }
        //     document.onclick = function(){
        //         console.log(divEle.style.color);
        //     }

        var arr = ["张三","李四","王五","王小二"];
        // <li>张三</li><li>李四</li><li>王五</li>
        // 通过js生成 ul li 然后把arr里的数据方法每一个li里；
        // 最终显示在ul里
        
        // "张三李四王五"
        var str = "";
        arr.forEach(function(item,key){
            if(key%2==0){
                var mystr = "<li style='background:red'>"+item+"</li>";
            }else{
                var mystr = "<li>"+item+"</li>";
            }
           
            // str+=item;
            str += mystr;
        })
        console.log(str);


        // var str = "<li>张三</li><li>李四</li><li>王五</li>";
        var ulEle = document.querySelector(".container");
        ulEle.innerHTML = str;

    </script>
</body>

</html>